<template>
  <div class="TBRBTUModify">
    <div class="TBRBTU-detail">
      <el-row :gutter="24">
        <el-col :span="2"><h4 class="cus-h4">发货详情</h4></el-col>
        <el-col v-if="deliveryOrSelf" :span="22">
          <el-radio-group v-model="deliveryOrSelf" disabled>
            <el-radio-button label="1">普通配货</el-radio-button><el-radio-button label="0">用户自提</el-radio-button>
          </el-radio-group>
          <el-table v-if="deliveryOrSelf =='1'" ref="goodsList" border :data="Bindata">
            <el-table-column prop="goodsName" label="商品" width="400">
              <template slot-scope="scope">
                <div class="cus-list">
                  <div class="cus-left">
                    <img
                      :src="scope.row.goodsPic"
                      alt=""
                    >
                  </div>
                  <div class="cus-right">
                    <p>{{ scope.row.goodsName }}</p>
                    <p v-if="true" class="cus-font">规格:{{ scope.row.goodsSpec }}</p>
                    <p>设备编号:{{ scope.row.deviceNo }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="数量">
              <template slot-scope="scope">
                <span>x {{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="goodsType" label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.goodsType =='lease'">租赁</span>
                <span v-else>售卖</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderState" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.orderState===101">待付款</span>
                <span v-if="scope.row.orderState===201">待发货</span>
                <span v-if="scope.row.orderState===302">待用户自提</span>
                <span v-if="scope.row.orderState===301">待用户取货</span>
                <span v-if="scope.row.orderState===401">使用中</span>
                <span v-if="scope.row.orderState===501">待取货</span>
                <span v-if="scope.row.orderState===502">待商户取货</span>
                <span v-if="scope.row.orderState===503">待用户结算</span>
                <span v-if="scope.row.orderState===701">已关闭</span>
                <span v-if="scope.row.orderState===801">已完成</span>
              </template>
            </el-table-column>
          </el-table>
          <el-table v-if="deliveryOrSelf =='0' " ref="selfGoodsList" border :data="selfBindata">
            <el-table-column prop="goodsName" label="商品" width="400">
              <template slot-scope="scope">
                <div class="cus-list">
                  <div class="cus-left">
                    <img
                      :src="scope.row.goodsPic"
                      alt=""
                    >
                  </div>
                  <div class="cus-right">
                    <p>{{ scope.row.goodsName }}</p>
                    <p v-if="true" class="cus-font">规格:{{ scope.row.goodsSpec }}</p>
                    <p>设备编号:{{ scope.row.deviceNo }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="数量">
              <template slot-scope="scope">
                <span>x {{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="goodsType" label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.goodsType =='lease'">租赁</span>
                <span v-else>售卖</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderState" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.orderState===101">待付款</span>
                <span v-if="scope.row.orderState===201">待发货</span>
                <span v-if="scope.row.orderState===302">待用户自提</span>
                <span v-if="scope.row.orderState===301">待用户取货</span>
                <span v-if="scope.row.orderState===401">使用中</span>
                <span v-if="scope.row.orderState===501">待取货</span>
                <span v-if="scope.row.orderState===502">待商户取货</span>
                <span v-if="scope.row.orderState===503">待用户结算</span>
                <span v-if="scope.row.orderState===701">已关闭</span>
                <span v-if="scope.row.orderState===801">已完成</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col v-if="!deliveryOrSelf" :span="22">
          <el-table ref="goodsList" border :data="Bindata" @selection-change="selectPickUp">
            <el-table-column type="selection" />
            <el-table-column prop="goodsName" label="商品" width="400">
              <template slot-scope="scope">
                <div class="cus-list">
                  <div class="cus-left">
                    <img
                      :src="scope.row.goodsPic"
                      alt=""
                    >
                  </div>
                  <div class="cus-right">
                    <p>{{ scope.row.goodsName }}</p>
                    <p v-if="true" class="cus-font">规格:{{ scope.row.goodsSpec }}</p>
                    <p>设备编号:{{ scope.row.deviceNo }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="数量">
              <template slot-scope="scope">
                <span>x {{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="goodsType" label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.goodsType =='lease'">租赁</span>
                <span v-else>售卖</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderState" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.orderState===101">待付款</span>
                <span v-if="scope.row.orderState===201">待发货</span>
                <span v-if="scope.row.orderState===302">待用户自提</span>
                <span v-if="scope.row.orderState===301">待用户取货</span>
                <span v-if="scope.row.orderState===401">使用中</span>
                <span v-if="scope.row.orderState===501">待取货</span>
                <span v-if="scope.row.orderState===502">待商户取货</span>
                <span v-if="scope.row.orderState===503">待用户结算</span>
                <span v-if="scope.row.orderState===701">已关闭</span>
                <span v-if="scope.row.orderState===801">已完成</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <div class="TBRBTU-information">
      <el-row :gutter="24">
        <el-col :span="2"><h4 v-if="state !=501 " class="cus-h4">收货信息</h4><h4 v-if="state ==501 " class="cus-h4">取货信息</h4></el-col>
        <el-col :span="22">
          <p class="info">
            <span>收货人:</span><span class="span">{{ info.consignee }}</span>
          </p>
          <p class="info"><span>电话:</span><span class="span">{{ info.phone }}</span></p>
          <p class="info">
            <span>收货地址:</span><span class="span">{{ info.receiptAddress }}</span>
          </p>
        </el-col>
      </el-row>
    </div>

    <div v-if="state==='201'" class="TBRBTU-mode">
      <el-row v-if="deliveryOrSelf == '1'" :gutter="24">
        <el-col :span="2"><h4 class="cus-h4">发货方式</h4></el-col>
        <el-col :span="22">
          <p class="cus-radio">
            <el-radio-group v-model="deliveryType" @change="changeDeliverType">
              <el-radio label="1">门店配送</el-radio>
              <el-radio label="2">物流发货</el-radio>
            </el-radio-group>
          </p>
          <div v-if="deliveryType === '2'" class="cus-wuliu">
            <p>
              <span>物流公司</span><el-select v-model="shipChannel" placeholder="选择物流公司">
                <el-option
                  v-for="item in shipList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                /></el-select>
            </p>
            <p><span>物流单号</span><el-input v-model="shipSn" placeholder="单行输入" /></p>
            <p style="font-size:14px;margin:30px 0px">选择配货员</p>
            <div style="width: 18%;background:#F7F7F7;border-radius: 10px">
              <el-radio-group v-model="packUserId">
                <el-col v-for="(item,index) in packList" :key="index" :span="24" style="margin: 10px 0px">
                  <el-radio :label="item.id">
                    <span>配货员:{{ item.userName }} {{ item.phone }}</span>
                  </el-radio>
                </el-col>
              </el-radio-group>
            </div>
          </div>

          <div v-if="deliveryType === '1'" class="cus-Distribution">
            <div class="left">
              <p style="font-size:14px;margin:30px 0px">选择配货员</p>
              <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                <el-radio-group v-model="packUserId">
                  <el-col v-for="(item,index) in packList" :key="index" :span="24" style="margin: 10px 0px">
                    <el-radio :label="item.id">
                      <span>配货员:{{ item.userName }} {{ item.phone }}</span>
                    </el-radio>
                  </el-col>
                </el-radio-group>
              </div>
              <p style="font-size:14px;margin:30px 0px">选择配送员</p>
              <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                <el-radio-group v-model="deliverUserId">
                  <el-col v-for="(item,index) in deliverList" :key="index" :span="24" style="margin: 10px 0px">
                    <el-radio :label="item.id">
                      <span>配送员:{{ item.userName }} {{ item.phone }}</span>
                    </el-radio>
                  </el-col>
                </el-radio-group>
              </div>
            </div>
            <div class="right" />
          </div>
          <p class="cus-btn-item">
            <el-button type="primary" @click="submitPack">确定发货</el-button>
          </p>
        </el-col>
      </el-row>
      <el-row v-else-if="deliveryOrSelf == '0'" :gutter="24">
        <el-col :span="2"><h4 class="cus-h4" /></el-col>
        <el-col :span="22">
          <p style="font-size:14px;margin:30px 0px">选择配货员</p>
          <div style="width: 18%;background:#F7F7F7;border-radius: 10px">
            <el-radio-group v-model="packUserId">
              <el-col v-for="(item,index) in packList" :key="index" :span="24" style="margin: 10px 0px">
                <el-radio :label="item.id">
                  <span>配货员:{{ item.userName }} {{ item.phone }}</span>
                </el-radio>
              </el-col>
            </el-radio-group>
          </div>
          <p class="cus-btn-item">
            <el-button type="primary" @click="submitPack">确定</el-button>
          </p>
        </el-col>

      </el-row>
    </div>
    <div v-if="state==='302'" class="TBRBTU-mode">
      <el-row :gutter="24">
        <el-col :span="2" />
        <el-col :span="22">
          <p class="cus-btn-item">
            <el-button type="primary" @click="submitTake">确定已取货</el-button>
          </p>
        </el-col>
      </el-row>
    </div>
    <div v-if="state==='501'" class="TBRBTU-mode">
      <el-row :gutter="24">
        <el-col :span="2"><h4 class="cus-h4">取货方式</h4></el-col>
        <el-col :span="22">
          <p class="cus-radio">
            <el-radio-group v-model="deliveryType" @change="changeDeliverType">
              <el-radio label="1">门店</el-radio>
              <el-radio label="2">物流</el-radio>
            </el-radio-group>
          </p>
          <div v-if="deliveryType === '2'" class="cus-wuliu">
            <p>
              <span>物流公司</span><el-select v-model="shipChannel" placeholder="选择物流公司">
                <el-option
                  v-for="item in shipList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                /></el-select>
            </p>
            <p><span>物流单号</span><el-input v-model="shipSn" placeholder="单行输入" /></p>
            <p style="font-size:14px;margin:30px 0px">选择维护员</p>
            <div style="width: 18%;background:#F7F7F7;border-radius: 10px">
              <el-radio-group v-model="maintainerId">
                <el-col v-for="(item,index) in maintainerList" :key="index" :span="24" style="margin: 10px 0px">
                  <el-radio :label="item.id">
                    <span>维护员:{{ item.userName }} {{ item.phone }}</span>
                  </el-radio>
                </el-col>
              </el-radio-group>
            </div>
          </div>

          <div v-if="deliveryType === '1'" class="cus-Distribution">
            <div class="left">
              <p style="font-size:14px;margin:30px 0px">选择配送员</p>
              <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                <el-radio-group v-model="deliverUserId">
                  <el-col v-for="(item,index) in deliverList" :key="index" :span="24" style="margin: 10px 0px">
                    <el-radio :label="item.id">
                      <span>配送员:{{ item.userName }} {{ item.phone }}</span>
                    </el-radio>
                  </el-col>
                </el-radio-group>
              </div>
              <p style="font-size:14px;margin:30px 0px">选择维护员</p>
              <div style="width: 100%;background:#F7F7F7;border-radius: 10px">
                <el-radio-group v-model="maintainerId">
                  <el-col v-for="(item,index) in maintainerList" :key="index" :span="24" style="margin: 10px 0px">
                    <el-radio :label="item.id">
                      <span>维护员:{{ item.userName }} {{ item.phone }}</span>
                    </el-radio>
                  </el-col>
                </el-radio-group>
              </div>
            </div>
            <div class="right" />
          </div>
          <p class="cus-btn-item">
            <el-button type="primary" @click="submitPickUp">确定取货</el-button>
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>/** 待用户收货-修改-发货 */
import { loadNotPickUp, notDeliver, postPickUp, sureDelivery, takeByself } from '@/api/order'
import { StaffMangeList } from '@/api/customAPI/shop/staffManage'
import { getShipList } from '@/api/auth'
/* import { packList } from '@/api/market'*/

export default {
  name: 'TBRBTUModify',
  data() {
    return {
      orderGoodsList: [],
      orderId: '',
      packId: '',
      receiverName: '',
      receiverPhone: '',
      receiverAddress: '',
      deliveryUserId: '',
      Bindata: [],
      state: null,
      deliveryType: '',
      info: {
        consignee: '',
        phone: '',
        receiptAddress: ''
      },
      shipList: [],
      packList: [],
      deliverList: [],
      packUserId: '',
      deliverUserId: '',
      orderGoodsIds: [],
      shipChannel: '',
      shipSn: '',
      storeId: null,
      deliveryOrSelf: null,
      selfBindata: [],
      maintainerId: null,
      maintainerList: [],
      selectList: []
    }
  },
  created() {
    this.init()
  },
  activated() {
    this.init()
  },
  methods: {
    init() {
      const params = this.$dd(this.$route.query.p)
      this.orderId = params.orderId

      if (params) {
        if (params.packId) {
          this.packId = params.packId
        }
        const data = {
          orderId: params.orderId,
          packId: params.packId ? params.packId : null
        }
        this.state = params.state.toString()
        switch (params.state.toString()) {
          /** 待发货*/
          case '201':
            notDeliver(data).then(response => {
              console.log(response.data.data)
              this.Bindata = response.data.data.orderGoodsList
              this.selfBindata = response.data.data.orderGoodsList
              if (response.data.data.orderGoodsIdList) {
                this.deliveryType = response.data.data.deliveryType
                this.deliverUserId = response.data.data.deliverUserId
              }
              this.deliveryOrSelf = response.data.data.deliveryOrSelf.toString()
              this.storeId = response.data.data.storeId
              StaffMangeList({ page: 1, limit: 0, storeId: this.storeId }).then(res => {
                const staffList = res.data.data.list
                this.packList = []
                this.deliverList = []
                staffList.forEach(item => {
                  if (item.roles.includes('1')) {
                    this.packList.push(item)
                  }
                  if (item.roles.includes('0')) {
                    this.deliverList.push(item)
                  }
                })
                this.packList.unshift({
                  id: 'all',
                  userName: '全部一起抢单',
                  phone: ''
                })
                this.packList.unshift({
                  id: 'sort',
                  userName: '按顺序抢单',
                  phone: ''
                })
                this.deliverList.unshift({
                  id: 'all',
                  userName: '全部一起抢单',
                  phone: ''
                })
                this.deliverList.unshift({
                  id: 'sort',
                  userName: '按顺序抢单',
                  phone: ''
                })
              })
              // ***
              this.info.consignee = response.data.data.receiverName
              this.info.phone = response.data.data.receiverPhone
              this.info.receiptAddress = response.data.data.receiverAddress
              if (response.data.data.deliveryType) {
                this.deliveryType = response.data.data.deliveryType.toString()
              }
            })
            break
            /** 待用户自提*/
          /* case '302':
            delete data.packId
            loadNotTakingByself(data).then(response => {
              this.Bindata = response.data.data.Bindata
              this.deliveryType = response.data.data.deliveryType
              this.deliverUserId = response.data.data.deliverUserId
            })
            break*/
          /** 待取货*/
          case '501':
            loadNotPickUp(data).then(response => {
              console.log(response.data.data)
              this.Bindata = response.data.data.deliveryGoodsVos
              this.deliveryOrSelf = false
              this.storeId = response.data.data.storeId
              StaffMangeList({ page: 1, limit: 0, storeId: this.storeId }).then(res => {
                const staffList = res.data.data.list
                this.maintainerList = []
                this.deliverList = []
                staffList.forEach(item => {
                  if (item.roles.includes('2')) {
                    this.maintainerList.push(item)
                  }
                  if (item.roles.includes('0')) {
                    this.deliverList.push(item)
                  }
                })
                this.maintainerList.unshift({
                  id: 'all',
                  userName: '全部一起抢单',
                  phone: ''
                })
                this.maintainerList.unshift({
                  id: 'sort',
                  userName: '按顺序抢单',
                  phone: ''
                })
                this.deliverList.unshift({
                  id: 'all',
                  userName: '全部一起抢单',
                  phone: ''
                })
                this.deliverList.unshift({
                  id: 'sort',
                  userName: '按顺序抢单',
                  phone: ''
                })
              })
              // ***
              this.info.consignee = response.data.data.receiverName
              this.info.phone = response.data.data.receiverPhone
              this.info.receiptAddress = response.data.data.receiverAddress
            })
            break
        }
      }
    },
    /** 待发货-确认发货 包裹打包*/
    submitPack() {
      console.log(this.selectIdList)
      if (this.deliveryOrSelf == '1') {
        if (!this.deliveryType) {
          return this.$message.warning('请选择发货方式')
        } else if (this.deliveryType == '1') {
          if (!this.deliverUserId) {
            return this.$message.warning('请选择配送员')
          }
          if (!this.packUserId) {
            return this.$message.warning('请选择配货员')
          }
        } else if (this.deliveryType == '2') {
          if (!this.shipChannel) {
            return this.$message.warning('请选择物流公司')
          }
          if (!this.shipSn) {
            return this.$message.warning('请输入物流单号')
          }
          if (!this.packUserId) {
            return this.$message.warning('请选择配货员')
          }
        }
      } else if (this.deliveryOrSelf == '0') {
        if (!this.packUserId) {
          return this.$message.warning('请选择配货员')
        }
      }

      const data = {
        packId: this.packId,
        orderId: this.orderId,
        deliveryType: this.deliveryType,
        packUserId: this.packUserId,
        deliveryUserId: this.deliverUserId,
        shipId: this.shipChannel,
        shipSn: this.shipSn,
        isPickUpSelf: parseInt(this.deliveryOrSelf)
      }
      sureDelivery(data).then(response => {
        console.log(response.data.data)
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-2)
      })
    },
    /** 待用户自提-确认已收货 订单商品状态变更（租赁为使用者/售卖为已完成）*/
    submitTake() {
      takeByself({ ids: this.selectIdList.toString() }).then(response => {
        console.log(response.data.data)
      })
    },
    /** 待取货-选择商品*/
    selectPickUp(v) {
      console.log(v)
      this.selectList = []
      v.forEach(item => {
        this.selectList.push(item.orderGoodsId)
      })
    },
    /** 待取货-取货 订单商品状态变更（商品状态变更为待商户收货）*/
    submitPickUp() {
      if (this.selectList.length == 0) {
        return this.$message.warning('请选择取货商品')
      }
      if (!this.deliveryType) {
        return this.$message.warning('请选择发货方式')
      } else if (this.deliveryType == '1') {
        if (!this.deliverUserId) {
          return this.$message.warning('请选择配送员')
        }
        if (!this.maintainerId) {
          return this.$message.warning('请选择运维员')
        }
      } else if (this.deliveryType == '2') {
        if (!this.shipChannel) {
          return this.$message.warning('请选择物流公司')
        }
        if (!this.shipSn) {
          return this.$message.warning('请输入物流单号')
        }
        if (!this.maintainerId) {
          return this.$message.warning('请选择维护员')
        }
      }
      console.log(this.maintainerId)
      const data = {
        ordergoodsId: this.selectList.toString(),
        id: this.orderId,
        ship: this.deliveryType,
        deliveryManId: this.deliverUserId,
        maintainManId: this.maintainerId,
        expressCompany: '',
        expressCode: ''

      }
      postPickUp(data).then(response => {
        console.log(response.data.data)
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-2)
      })
    },
    changeDeliverType() {
      if (this.deliveryType == '2') {
        getShipList().then(res => {
          console.log(res)
          this.shipList = res.data
        }).catch(err => {
          console.log(err)
          this.$message.error('加载物流信息失败')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.TBRBTUModify {
  padding: 50px 100px;
  .TBRBTU-detail {
    .cus-h4 {
      width: 80px;
    }
    .cus-list {
      width: 400px;
      display: flex;
      align-items: center;
      .cus-left {
        width: 100px;
        height: 100px;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .cus-right {
        margin-left: 20px;
        .cus-font {
          font-size: 14px;
          color: gray;
        }
      }
    }
  }
  .TBRBTU-information {
    margin-top: 40px;
    .cus-h4 {
      width: 80px;
    }
    .info {
      font-size: 15px;
      .span {
        color: gray;
        margin: 0px 20px;
      }
    }
  }
  .TBRBTU-mode {
    margin-top: 40px;
    .cus-h4 {
      width: 80px;
    }
    .cus-wuliu {
      p {
        span {
          font-size: 14px;
          margin-right: 10px;
        }
        .el-select,
        .el-input {
          width: 200px;
        }
      }
    }
    .cus-Distribution {
      display: flex;
      .left,
      .right {
        width: 400px;
      }
    }
    .cus-btn-item {
      margin-top: 30px;
      .el-button{
          width: 200px;
      }
    }
  }
}
</style>
